{extend name="../application/index/view/index/base.html" /}

{block name="main-content"}
<div class="breadcrumbs" id="breadcrumbs">
    <style>
        th{
            text-align: center;
        }
        .custom_id_card{
            width: 50px;
        }

    </style>
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">订单管理</a>
        </li>
        <li class="active">订单查询</li>
    </ul><!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">

    </div><!-- #nav-search -->
</div>
<div class="page-content">

    <div class="row" >
        <input id="query_roomcondition" type="text" placeholder="输入用户名或客户身份证号查询" style="width: 220px;height: 33px;float: left;margin-left: 9px;padding-left: 5px;"/>
        <button id="roomInformation_query" class="btn btn-primary btn-sm" data-toggle="modal" style="float: left;">
            查询信息</button>
        <div class="page-content">
            <div class="row">
                <table class="table table-striped table-hover table-bordered" id="think_rooms_table" style="text-align: center;margin-top: 50px;">
                    <thead>
                    <tr role="row">
                        <th style="width: 30px">客户姓名</th>
                        <th style="width: 50px">身份证号码</th>
                        <th style="width: 30px">性别</th>
                        <th style="width: 30px">房间编号</th>
                        <th style="width: 50px">入住时间</th>
                        <th style="width: 50px">退房时间</th>
                        <th style="width: 30px">订单状态</th>
                        <th style="width: 30px">随行人数</th>
                        <th style="width: 30px">房间数量</th>
                    </tr>
                    </thead>
                    <tbody class="think_orders_tr">

                    </tbody>
                </table>
                <div id="pagination_div"></div>
            </div><!-- /.row -->
            <!--房间修改框-->
            <div class="modal fade" id="revise_roomInformation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog ui-widget-content">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" >
                            </h4>
                        </div>
                        <div class="modal-body">

                            <div style="margin-top: 10px">
                                <span class="notice">房间编号：</span>
                                <input type="text" id="room_code" style="padding-left:16px;width: 300px;height: 40px;">
                                <span style="color: red">*</span>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="notice">房间地址：</span>
                                <input type="text" id="room_address" style="padding-left:16px;width: 300px;height: 40px;">
                                <span style="color: red">*</span>
                            </div>
                            <div style="margin-top: 10px">
                                <span class="notice">房间数量：</span>
                                <input type="text" id="room_num" style="padding-left:16px;width: 300px;height: 40px;">
                                <span style="color: red">*</span>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="btn_roominfo_false">取消
                            </button>
                            <button type="button" class="btn btn-primary" id="btn_roominfo_ture">
                                确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.page-content -->

    </div><!-- /.row -->
    <!--添加信息模板-->
    <script id="tpl-orderInformation" type="text/html">
        <% for(var i in orderInformation) {%>
        <tr class="tr">
            <td class="custom_name"><%= orderInformation[i].custom_name %></td>
            <td class="custom_id_card"><%= orderInformation[i].custom_id_card%></td>
            <td class="custom_sex"><%= orderInformation[i].custom_sex %></td>
            <td class="room_code"><%= orderInformation[i].room_code%></td>
            <td class="check_in_date"><%= orderInformation[i].check_in_date %></td>
            <td class="check_out_date"><%= orderInformation[i].check_out_date%></td>
            <td class="status"><%= orderInformation[i].status %></td>
            <td class="retinue"><%= orderInformation[i].retinue%></td>
            <td class="room_number"><%= orderInformation[i].room_number%></td>
        </tr>;
        <% } %>
    </script>
    <link href="__PUBLIC__/css/bootstrap-pagination.css" rel="stylesheet" />
    <script src="__PUBLIC__/js/bootstrap-paginator.min.js"></script>
</div><!-- /.page-content -->
<script>
    $(document).ready(function () {

        var limit = 10;

        //设置起始页和跳转点击的页面
        function initPagination(total) {
            var options = {
                currentPage: 1,
                totalPages: total,
                onPageClicked: function(e,originalEvent,type,page){
                    genTableContent(page);
                }
            };

            $('#pagination_div').bootstrapPaginator(options);
        }

        //设置总页数
        function getPageLimit() {
            var map = {};
            map.account = $('#query_roomcondition').val();
//        /*    map.custom_id_card =*/
            $.get('/index.php/index/room_order/getPageLimit',map,function (data) {
                if(data.code == 200){
                    var count = data.data;
                    var pageSum = Math.ceil(count / limit)==0?1:Math.ceil(count / limit);
                    initPagination(pageSum);
                }else{
                    initPagination(1);
                }
            });
        }

        //分页刷新
        function genTableContent(page) {
            var param = {
                page:page,
                limit:limit,
                account:$('#query_roomcondition').val()
            };
            $.get('/index.php/index/room_order/queryorder',param,function (data) {
                var space = $("#think_rooms_table").find('.think_orders_tr');
                space.empty();
                var html = template('tpl-orderInformation', {
                    orderInformation:data.data
                });
                $(".think_orders_tr").append(html);
            });

        }

        //点击查询
        $('#roomInformation_query').click(function () {
            genTableContent(1);
            getPageLimit();

        });
        genTableContent(1);
        getPageLimit();


    });
</script>
{/block}

